
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加部门</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>

</head>
<body>
<div id="app">
    <div id="deptAdd">
        <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="110px">

            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="addForm.deptName" id="input" class="ab"></el-input>
            </el-form-item>

            <el-form-item label="部门描述" prop="deptDesc">
                <el-input v-model="addForm.deptDesc" id="input" class="ab"></el-input>
            </el-form-item>

            <el-button type="primary" @click="confirmAdd" id="buttonSize">确认添加</el-button>
            <el-button @click="adddialogVisible = false">返 回</el-button>
            </el-form-item>
        </el-form>

    </div>


</div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            addForm:{},
        },
        methods:{
            confirmAdd(){
                axios.post("/dept/add",this.addForm).then(resp=>{
                    if (resp.data.code === 200){
                        this.$message.success("添加部门成功");
                        this.addForm={};
                    }
                })
            },
        }
    });
</script>
<style>
    #deptAdd{
        width: 600px;
        border: 1px solid #31b0d5;
        margin: 60px auto;
    }
    #input{
        width: 300px;
        line-height:5;
    }
    #buttonSize{
        margin-left: 40px;
        padding: 12px 15px;
    }

</style>
</html>